<template>
    <ElDialog v-model="isShow" title="基本信息" width="80%" @closed="handleClosed">
        <!-- 主要内容区域 -->
        <div class="status-bar">
            当前状态:
            <el-tag v-if="zxObj.dqjdName === '赢单'" type="success">{{ zxObj.dqjdName }}</el-tag>
            <el-tag v-else-if="zxObj.dqjdName === '待接触'" type="danger">{{ zxObj.dqjdName }}</el-tag>
            <el-tag v-else type="warning">{{ zxObj.dqjdName }}</el-tag>
        </div>
        <div class="content-container">
            <!-- 左侧内容 (66%) -->
            <div class="left-content">
                <!-- 客户基本信息 -->
                <div class="section">
                    <h3 class="section-title">咨询客户信息</h3>
                    <el-button type="primary" size="small" style="margin-bottom: 10px;"
                        @click="handleEditCustomerInfo">编辑</el-button>
                    <div class="divider"></div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">客户类型：</span>
                            <span class="info-value">{{ zxObj.zxkhlxName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">拓客渠道：</span>
                            <span class="info-value">{{ zxObj.zxtkqdName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">客户名称：</span>
                            <span class="info-value">{{ zxObj.zxkhmc }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">公司对接人：</span>
                            <span class="info-value">{{ zxObj.gsdjrUserName }}</span>
                        </div>
                    </div>
                </div>

                <!-- 客户联系方式 -->
                <div class="section">
                    <h3 class="section-title">客户联系方式</h3>
                    <div class="divider"></div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">咨询联系人：</span>
                            <span class="info-value">{{ zxObj.zxlxr }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">联系账号：</span>
                            <span class="info-value">{{ zxObj.lxrsjh }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">其它联系方式：</span>
                            <span class="info-value">{{ zxObj.qtlxfs }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">客户有效性：</span>
                            <span class="info-value">{{ zxObj.khyxxName }}</span>
                        </div>
                    </div>
                </div>

                <!-- 客户销售状态 -->
                <div class="section">
                    <h3 class="section-title">咨询店铺信息</h3>
                    <div class="divider"></div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">客户来源：</span>
                            <span class="info-value">{{ zxObj.zxtkqdName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺名称：</span>
                            <span class="info-value">{{ zxObj.zxdpptName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺类目：</span>
                            <span class="info-value">{{ zxObj.zxdplmName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">业务条线：</span>
                            <span class="info-value">{{ zxObj.zxywtxName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">服务班次：</span>
                            <span class="info-value">{{ zxObj.zxfwbcName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">收费模式：</span>
                            <span class="info-value">{{ zxObj.zxsfmsName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺城市：</span>
                            <span class="info-value">{{ zxObj.zxdpcs }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺客单：</span>
                            <span class="info-value">{{ zxObj.zxdpkdName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺销量：</span>
                            <span class="info-value">{{ zxObj.zxdpxlName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">店铺分类：</span>
                            <span class="info-value">{{ zxObj.zxdpflName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">咨询量(日均)：</span>
                            <span class="info-value">{{ zxObj.zxl }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">转化率(%)：</span>
                            <span class="info-value">{{ zxObj.zhl }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">平均响应：</span>
                            <span class="info-value">{{ zxObj.pjxy }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">重要程度：<el-rate v-model="zxObj.zycd"></el-rate></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧时间线 (33%) -->
            <div class="right-content">
                <el-button type="success" size="small" style="margin-bottom: 10px;"
                    @click="openAddGjjl">添加跟进记录</el-button>
                <el-timeline>
                    <el-timeline-item v-for="item in gjjlList" :key="item.gjjlId" :timestamp="item.createTime"
                        placement="top">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div class="czlx">新建跟进记录 <span style="color: #A49CA2;">（{{ item.createUserName }}）</span>
                            </div>
                            <div>
                                <el-tag size="small" effect="plain" @click.stop="handleEditFollow(item)"
                                    style="margin-right: 8px; cursor: pointer;">编辑</el-tag>
                                <el-tag size="small" effect="plain" @click.stop="handleViewAttachments(item)"
                                    style="cursor: pointer;">附件({{
                                        item.fileNewEntityList?.length || 0 }})</el-tag>
                            </div>
                        </div>
                        <el-card class="follow-card">
                            <div class="follow-header">
                                <div class="follow-info">
                                    <span class="follow-name">{{ item.createUserName }}</span>
                                    <span class="follow-time">{{ item.createTime }}</span>
                                </div>
                            </div>
                            <div class="follow-content">
                                <div class="follow-content-title">跟进节点 <span style="color: black;">{{ item.dqjdName
                                        }}</span></div>
                                <div class="follow-content-title">跟进方式 <span style="color: black;">{{ item.gjfsName
                                        }}</span></div>
                                <div class="follow-content-title">跟进日期 <span style="color: black;">{{ item.gjsj
                                        }}</span><span style="color: red;" v-if="item.timeoutFlag === true"> 超时</span>
                                </div>
                                <div class="follow-content-title">下次跟进日期 <span style="color: black;">{{ item.xcgjsj
                                        }}</span></div>
                                <div class="follow-content-title">跟进内容</div>
                                <div>{{ item.bjmxjqt }}</div>
                            </div>
                            <div class="follow-images">
                                <div class="image-list">
                                    <div v-for="(file, index) in filterImageFiles(item.fileNewEntityList)" :key="index"
                                        class="image-item">
                                        <div @click="openFilewImage(item, file)">
                                            <img :src="file.sysFileEntity.fileUrl" :alt="file.sysFileEntity.fileName"
                                                class="thumbnail-image" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button>关 闭</el-button>
        </span>

        <ElImageViewer v-if="previewVisible" @close="closePreview" :url-list="srcList_fileImg"
            :initial-index="selectedIndex" />
    </ElDialog>


    <FileDialog :fjObj="fjObj" @sx-list="sxList"></FileDialog>
</template>

<script setup lang="ts">
import { computed, ref, watch, reactive } from 'vue'
import { getConsultationInfoById, getGjListByZxId } from '../api'
import { addDialog, editDialog, gjjlDialog, addGjjlDialog, editGjjlDialog } from '@/views/menus/n-consultation-records-new/dialog/consultationRecordsDialog'
import FileDialog from '@/views/menus/n-ykf-file/components/FileDialog.vue'

interface Props {
    gjjlDetailsObj;
}

const zxObj = ref({

    dqjdName: '',

    zxkhlxName: '',
    zxtkqdName: '',
    zxkhmc: '',
    gsdjrUserName: '',

    zxlxr: '',
    lxrsjh: '',
    qtlxfs: '',
    khyxxName: '',

    zxdpptName: '',
    zxdpmc: '',
    zxdplmName: '',
    zxdpdjName: '',
    zxywtxName: '',
    zxywlxName: '',
    zxfwbcName: '',
    zxsfmsName: '',
    zxdpcs: '',
    zxdpkdName: '',
    zxdpxlName: '',
    zxdpflName: '',
    zxl: '',
    zhl: '',
    pjxy: '',
    zycd: ''
})

const props = defineProps<Props>();

// 显示
const isShow = computed(() => {
    return props.gjjlDetailsObj.isShow;
});

const handleClosed = () => {
    props.gjjlDetailsObj.isShow = false;
}

const emit = defineEmits(['sx-zxjl-list'])

// 过滤出图片文件
const filterImageFiles = (files: any[]) => {
    if (!files) return [];
    return files.filter(file => {
        const fileType = file.sysFileEntity.fileType?.toLowerCase();
        return ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'].includes(fileType);
    });
};

// 图片预览
const previewVisible = ref(false)
const selectedIndex = ref(0);
const srcList_fileObj = ref([])
const srcList_fileImg = ref([])

const openFilewImage = async (row, file) => {
    console.log(row);
    console.log(file);

    const imageList = filterImageFiles(row.fileNewEntityList);

    srcList_fileObj.value = [];
    srcList_fileImg.value = [];

    for (let i = 0; i < imageList.length; i++) {
        srcList_fileObj.value.push(imageList[i]);
        srcList_fileImg.value.push(imageList[i].sysFileEntity.fileUrl);
    }

    for (let i = 0; i < srcList_fileObj.value.length; i++) {
        if (srcList_fileObj.value[i].ykfFileId === file.ykfFileId) {
            selectedIndex.value = i;
            previewVisible.value = true;
            return;
        }
    }
}

let gjjlList = ref([])

const getConsultationInfoByIdFunc = (zxid) => {
    getConsultationInfoById({ zxid })
        .then(res => {
            console.log(res);
            zxObj.value = res;
        })
}

const getGjListByZxIdFunc = (zxid) => {
    getGjListByZxId({ zxid })
        .then(res => {
            gjjlList.value = res;
            console.log(gjjlList.value);
        })
}

watch(() => props.gjjlDetailsObj.zxid, (zxid) => {
    console.log(zxid);
    // 取咨询记录
    getConsultationInfoByIdFunc(zxid);
    // 取咨询记录的跟进列表
    getGjListByZxIdFunc(zxid);
})

const closePreview = () => {
    previewVisible.value = false;
}

const handleEditCustomerInfo = async () => {
    // 处理客户基本信息编辑逻辑
    await editDialog.title('编辑咨询记录').open({ row: zxObj.value });
    getConsultationInfoByIdFunc(props.gjjlDetailsObj.zxid);
    emit('sx-zxjl-list');
};

const handleEditFollow = async (row) => {
    row.zxkhmc = zxObj.value.zxkhmc
    await editGjjlDialog.title('编辑跟进记录').open({ row });
    await getGjListByZxIdFunc(props.gjjlDetailsObj.zxid);
    await getConsultationInfoByIdFunc(props.gjjlDetailsObj.zxid);
};

const fjObj = reactive({
    isShow: false,
    gjjlId: '',
    mklx: ''
});

const handleViewAttachments = async (row) => {
    // 传过去mklx以及glId
    fjObj.isShow = true;
    fjObj.gjjlId = row.gjjlId;
    fjObj.mklx = 'gjjl';
};

const sxList = async () => {
    console.log(props.gjjlDetailsObj.zxid);
    getGjListByZxIdFunc(props.gjjlDetailsObj.zxid);
}

const openAddGjjl = async () => {
    // await gjjlDialog.title('新增跟进记录').open({ row: { isAdd: true, zxid: props.gjjlDetailsObj.zxid } })
    // await getGjListByZxIdFunc(props.gjjlDetailsObj.zxid);
    console.log(zxObj.value);
    await addGjjlDialog.title('新增跟进记录').open({ row: { zxkhmc: zxObj.value.zxkhmc, zxid: props.gjjlDetailsObj.zxid } });
    await getGjListByZxIdFunc(props.gjjlDetailsObj.zxid);
    await getConsultationInfoByIdFunc(props.gjjlDetailsObj.zxid);
}

</script>

<style scoped lang="scss">
.content-container {
    display: flex;
    height: 90vh;
}

.left-content {
    flex: 2;
    /* 占2/3 */
    padding-right: 20px;
    overflow-y: auto;

}

.right-content {
    flex: 0 0 24%;
    /* 占1/3 */
    padding-left: 20px;
    border-left: 1px solid #eee;
    overflow-y: auto;
    padding-right: 20px;
}

.section {
    margin-bottom: 24px;
}

.section-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.divider {
    border-bottom: 1px dashed #ddd;
    margin-bottom: 15px;
}

.info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.info-item {
    min-width: calc(25% - 16px);
    margin-bottom: 8px;
}

.info-label {
    color: #888;
}

.info-value {
    color: #333;
}

.el-timeline {
    padding-left: 10px;
}

.el-card {
    margin-bottom: 10px;
}

.czlx {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.follow-name {
    font-size: 17px;
    font-weight: bold;
}

.follow-time {
    margin-left: 10px;
    color: #A49CA2;
}

.follow-content-title {
    color: #888;
    margin-top: 10px;
    margin-bottom: 5px;
}

.follow-images {
    margin-top: 10px;
}

.follow-images {
    .image-list {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}

.image-item {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.thumbnail-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
        transform: scale(1.05);
    }
}

.status-bar {
    margin: -10px 0 15px 0;
    font-size: 14px;
    color: #666;
}
</style>